"use client"

import type React from "react"
import { Inter } from "next/font/google"
import "./globals.css"
import Header from "@/components/layout/header"
import ClientLayout from "@/components/layout/client-layout"
import { PlayerBar } from "@/components/player/player-bar"
import { Providers } from "@/components/providers"
import { Toaster } from "@/components/ui/toaster"
import { PlayerProvider } from "@/contexts/player-context"
import { usePathname } from "next/navigation"

const inter = Inter({ subsets: ["latin"] })

function RootLayoutContent({ children }: { children: React.ReactNode }) {
    const pathname = usePathname()
    const isNowPlayingPage = pathname === "/now-playing"

    return (
        <div className="relative min-h-screen flex flex-col">
            {!isNowPlayingPage && <Header />}
            <main className="flex-1">
                <ClientLayout>{children}</ClientLayout>
            </main>
            {!isNowPlayingPage && <PlayerBar />}
        </div>
    )
}

export default function ClientRootLayout({
                                             children,
                                         }: {
    children: React.ReactNode
}) {
    return (
        <Providers>
            <PlayerProvider>
                <RootLayoutContent>{children}</RootLayoutContent>
            </PlayerProvider>
            <Toaster />
        </Providers>
    )
}

